import React from 'react';
import { Carousel,WingBlank,Grid} from 'antd-mobile';
import * as conf from '../admin/config';
import { Link} from 'react-router';
import './static/css/style.less';


class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loading:false
    };
  };

  componentDidMount(){
    drag();
  }


  render() {
    return (
      <div className="drag-box">
        <div className="drag" id="drag-1">
          drag-1
        </div>
        <div className="drag" id="drag-1">
          drag-1
        </div>
      </div>
    );
  }
}

//拖拽的实现
function drag() {
  $(".drag").each(function(){
    let div = $(this);
    div.mousemove(function(){
      //获取当前元素的坐标
      let offset = {
        x : $(this)[0].offsetLeft+$(this).width()+5,
        y : $(this)[0].offsetTop+$(this).height()+5
      };
      $(document).bind("mousemove",function(ev){
        //获取当前鼠标的坐标
        let mouse = {x : ev.pageX, y : ev.pageY};

        //鼠标改为上下拉伸
        if(mouse.x <= offset.x && mouse.x >= offset.x-15 && mouse.y <= offset.y && mouse.y >= offset.y-15){
          div.css({'cursor':'nwse-resize'});
          $(this).unbind("mousemove");
        }else{
          div.css('cursor','move')
        }
      });

    });

    //等比例拉伸放开后
    div.mouseup(function(){
      let width = $(this).width()+'px';
      let height = $(this).height()+'px';
      $(this).css({'height':height,'width':width});
    });

    //开始拖动
    div.bind("mousedown",function(event){
      //获取需要拖动节点的坐标
      let offset = {
        x : $(this)[0].offsetLeft,
        y : $(this)[0].offsetTop
      };

      //获取当前鼠标的坐标
      let mouse = {
        x : event.pageX,
        y : event.pageY
      };
      // console.log(mouse);


      /* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
      $(document).bind("mousemove",function(ev){
        //计算鼠标移动了的位置
        let move = {
          x : ev.pageX - mouse.x,
          y : ev.pageY - mouse.y,
        };

        /* 设置移动后的元素坐标 */
        let now = {
          x : (offset.x + move.x ) + "px",
          y : (offset.y + move.y ) + "px",
        };

        /* 改变目标元素的位置 */
        div.css({
          top:now.y,
          left:now.x
        });
      });

      /* 当鼠标左键松开，接触事件绑定 */
      $(document).bind("mouseup",function(){
        $(this).unbind("mousemove");
      });
    });
  })
}


export default App;